<script setup>
import { defineEmits, defineProps, computed, watch, ref } from 'vue';
import { useModalStore } from '@/store';

const InputModeValueMap = {
	PointLabel: '点',
	Point: 'point',

	LineLabel: '线',
	Line: 'line',

	PolygonLabel: '面',
	Polygon: 'polygon'
};

const SelectOptions = ref([
	{
		label: InputModeValueMap.PointLabel,
		value: InputModeValueMap.Point,
	},
	{
		label: InputModeValueMap.LineLabel,
		value: InputModeValueMap.Line,
	},
	{
		label: InputModeValueMap.PolygonLabel,
		value: InputModeValueMap.Polygon,
	}
]);

const emit = defineEmits(['add-entity']);
const modalStore = useModalStore();

const closeModal = () => {
	clearEntity();
	modalStore.closeInputPointModal();
};

// 添加实体
const inputMode = ref('point');
const pointName = ref('');
const pointX = ref('');
const pointY = ref('');

const addEntity = data => {
	const { type, name, points } = data;

	emit('add-entity', {
		type,
		name,
		points
	});
};

const clearEntity = () => {
	inputMode.value = InputModeValueMap.Point;
	pointName.value = '';
	pointX.value = '';
	pointY.value = '';
};

</script>

<template>
	<n-modal v-model:show="modalStore.showInputPointModal" block-scroll draggable close-on-esc title="编辑" preset="dialog" display-directive="if">
		<div class="popup-modal-content">
			<div class="input-item">
				<span>模式:</span>
				<n-select v-model:value="inputMode" :options="SelectOptions" />
			</div>
			<!-- 点 -->
			<div v-if="inputMode === InputModeValueMap.Point">
				<div class="input-item">
					<span>名称：</span>
					<n-input v-model:value="pointName" placeholder="请输入名称" :clearable="true"></n-input>
				</div>
				<div class="input-item">
					<span>x：</span>
					<n-input v-model:value="pointX" placeholder="请输入x坐标" type="number"></n-input>
				</div>
				<div class="input-item">
					<span>y：</span>
					<n-input v-model:value="pointY" placeholder="请输入y坐标" type="number"></n-input>
				</div>
			</div>
			<!-- 线 -->
			<div v-else-if="inputMode === InputModeValueMap.Line">
				<div class="input-item">
					<span>名称：</span>
					<n-input></n-input>
				</div>
				<div class="input-item">
					<span>点1：</span>
					<span>x:</span>
					<n-input></n-input>
					<span>y:</span>
					<n-input></n-input>
				</div>
				<div class="input-item">
					<span>点2：</span>
					<span>x:</span><n-input></n-input>
					<span>y:</span><n-input></n-input>
				</div>
			</div>
			<!-- 面 -->
			<div v-else-if="inputMode === InputModeValueMap.Polygon">
				<div class="input-item">
					<span>名称：</span>
					<n-input></n-input>
				</div>
				<div class="input-item">
					<span>点1：</span>
					<n-input></n-input>
				</div>
				<div class="input-item">
					<span>点2：</span>
					<n-input></n-input>
				</div>
				<div class="input-item">
					<span>点3：</span>
					<n-input></n-input>
				</div>
			</div>
		</div>
		<div class="dialog-footer">
			<n-button type="primary" @click="addEntity" size="small">添加</n-button>
			<n-button type="error" @click="closeModal" size="small">关闭</n-button>
		</div>
	</n-modal>

</template>

<style lang="scss" scoped>
.popup-modal-content {
	background-color: #fff;
	font-weight: 400;

	.input-item {
		span {
			display: inline-block;
			width: 80px;
		}

		display: flex;
		justify-content: start;
		align-items: center;
		padding: 3px;
	}
}

.dialog-footer {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 10px;
}
</style>